/**
 * iframe: true
 * compact: true
 */
import { Button, Card, Space } from 'antd';
import { Steps } from 'xwd-ant';
import { useState } from 'react';

export default () => {
  const [current, setCurrent] = useState(0);

  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  return (
    <Card title="步骤切换" bordered={false}>
      <Steps
        current={current}
        items={[
          {
            title: '第一步',
            description: '这是第一步的描述',
          },
          {
            title: '第二步',
            description: '这是第二步的描述',
          },
          {
            title: '第三步',
            description: '这是第三步的描述',
          },
          {
            title: '第四步',
            description: '这是第四步的描述',
          },
        ]}
      />
      <div style={{ marginTop: 24 }}>
        <Space>
          <Button
            type="primary"
            onClick={next}
            disabled={current === 3}
          >
            下一步
          </Button>
          <Button
            onClick={prev}
            disabled={current === 0}
          >
            上一步
          </Button>
        </Space>
      </div>
    </Card>
  );
}; 